<template>
  <div>
    <van-search
      show-action
      placeholder="请输入小区或地址"
    >
      <template #left-icon>
        <span  @click="$router.push('/city')" class="title">
          上海
          <i>▼</i>
        </span>
      </template>
      <template #action>
        <van-icon name="location-o" color="#fff" />
      </template>
    </van-search>
    <van-swipe
      width="100%"
      height="212"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="item in swipePic" :key="item.id">
        <img
          width="100%"
          height="212"
          :src="'http://liufusong.top:8080' + item.imgSrc"
        />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item
        icon="wap-home-o"
        text="整租"
        @click="$router.push('/layout/find')"
      />
      <van-grid-item
        icon="friends-o"
        text="合租"
        @click="$router.push('/layout/message')"
      />
      <van-grid-item
        icon="location-o"
        text="地图找房"
        @click="$router.push('/layout/message')"
      />
      <van-grid-item
        icon="shop-o"
        text="去出租"
        @click="$router.push('/login')"
      />
    </van-grid>
    <van-cell title="租房信息" value="更多" />
    <van-grid column-num="2" direction="horizontal">
      <van-grid-item v-for="item in groups" :key="item.id">
        <van-image
          width="50"
          height="50"
          :src="'http://liufusong.top:8080' + item.imgSrc"
        />
        <van-cell :title="item.desc" :label="item.title" />
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { swipe, groups } from '@/api/home'
export default {
  name: 'home',
  data () {
    return {
      swipePic: [],
      groups: []
    }
  },

  created () {
    this.getSwipePic()
    this.getGroups()
  },

  methods: {
    async getSwipePic () {
      try {
        const res = await swipe()
        this.swipePic = res.data.body
      } catch (err) {
        console.log(err)
      }
    },
    async getGroups () {
      try {
        const res = await groups()
        this.groups = res.data.body
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-search[data-v-1d9b105c] {
  width: 90%;
  margin-left: 5%;
}
.title {
  color: #666;
}
.van-search {
  position: absolute;
  top: 25px;
  width: 100%;
  padding: 0 20px;
  z-index: 2;
  // background-color: #fff;
  background-color: transparent;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
/deep/.van-grid-item__icon {
  font-size: 40px;
}
/deep/.van-grid-item__text {
  font-size: 14px;
}
</style>
